<template>
  <div class="account-management">
    <div style="display: flex;
    flex-direction: row;
    justify-content: space-between;">
      <div class="user-info">
      <el-avatar :size="100" icon="el-icon-user"></el-avatar>
      <div class="user-details">
        <div style="display: flex;
    flex-direction: row;
    align-items: center;">
       <div class="username" >{{ username }}</div>
        <div class="last-login">上次登录: {{ lastLogin }}</div>    
        </div>
       
        <el-button type="primary" class="role-button">超级管理员</el-button>
      </div>
    </div>
    <div class="search-bar">
      <el-input placeholder="搜索成员" v-model="search" style="width: 300px;margin-right: 10px;"></el-input>
      <el-button type="primary" class="add-member-button">+添加成员</el-button>
    </div>
    </div>
    
    <el-table :header-cell-style="{ background: '#EBEEF2' }" :data="filteredTableData"  style="width: 100%;">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="account" label="账号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="activated" label="激活">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.activated" disabled></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="lastLogin" label="最后登录"></el-table-column>
      <el-table-column prop="note" label="备注"></el-table-column>
      <el-table-column prop="role" label="权限"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div v-if="username!=scope.row.account">
          <el-button type="text" >删除</el-button>
          <el-button type="text" >暂停</el-button>
          <el-button type="text" >资料</el-button>
          </div>
 
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Laucher',
  data() {
    return {
      countDown: 5,
      timer: null,
      username: 'willmen',
      lastLogin: '2024.01.25 14:21',
      search: '',
      tableData: [
        {
          account: 'willmen',
          name: '李明',
          activated: true,
          createTime: '2024.02.36 18:25',
          lastLogin: '2024.02.36 18:25',
          note: '---',
          role: '超级管理员'
        },
        {
          account: 'fenag',
          name: '张胜男',
          activated: true,
          createTime: '2024.02.36 18:25',
          lastLogin: '2024.02.36 18:25',
          note: '---',
          role: '管理员'
        }
      ]
    };
  },
  computed: {
    filteredTableData() {
      return this.tableData.filter(item => item.name.includes(this.search));
    }
  }
};
</script>

<style scoped>
.account-management {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-details {
  margin-left: 20px;
}

.username {
  font-size: 18px;
  font-weight: bold;
  margin-right: 20px;
}

.last-login {
  color: #909399;
}

.role-button {
  margin-top: 10px;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.search-bar .el-input {
  flex: 1;
}

.add-member-button {
  margin-left: 10px;
}


::v-deep .el-table th {
  /* background-color: #f5f5f5 !important; */
  color: #333 !important;
  font-size: 14px !important;
}
</style>
